<template>
	<view class="wrap">
		<template v-if="step == 1">
			<view class="tips">
				<text>请输入</text>
				<text>{{fPhoneSecret}}</text>
				<text>收到的短信验证码</text>
			</view>
			<view class="item bw h100 app_flex-aic">
				<view class="item-label">验证码</view>
				<view class="item-content app_flex1">
					<input v-model="fCode" type="number" placeholder="请输入手机验证码" placeholder-class="app_phc">
				</view>
				<view class="item-R codeTap" :class="{active: !getCodeFlag}" @click="sendCode(fPhone)">{{tips}}</view>
			</view>
			<view class="btn">
				<g-btn title="下一步" @click="onNextTap"></g-btn>
			</view>
		</template>
		<template v-if="step == 2">
			<view class="item bw h100 app_flex-aic">
				<view class="item-label">手机号</view>
				<view class="item-content app_flex1">
					<input v-model="sPhone" type="number" placeholder="请输入手机号码" placeholder-class="app_phc">
				</view>
			</view>
			<view class="item bw h100 app_flex-aic">
				<view class="item-label">验证码</view>
				<view class="item-content app_flex1">
					<input v-model="sCode" type="number" placeholder="请输入手机验证码" placeholder-class="app_phc">
				</view>
				<view class="item-R codeTap" :class="{active: !getCodeFlag}" @click="sendCode(sPhone)">{{tips}}</view>
			</view>
			<view class="btn">
				<g-btn title="确定" @click="onConfirmTap"></g-btn>
			</view>
		</template>

		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange" @end="getCodeFlag = false" @start="getCodeFlag = true"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				step: 1,
				fPhone: '',
				fPhoneSecret: '',
				fCode: '',
				sPhone: '',
				sCode: '',
				seconds: 10,
				tips: '',
				getCodeFlag: false

			}
		},
		onLoad(options) {
			this.$store.dispatch('updateUserInfo').then(userInfo => {
				console.log(userInfo);
				this.fPhone = userInfo.tel
				this.fPhoneSecret = userInfo.tel.slice(0, 3) + '****' + userInfo.tel.slice(7)
			})
		},
		methods: {
			sendCode(tel) {
				if (this.$refs.uCode.canGetCode) {
					this.$g_api.commonSendCode({
						tel,
					}).then(({
						data
					}) => {
						uni.hideLoading();
						uni.showToast({
							title: '验证码已发送'
						})
						this.$refs.uCode.start();
					})
				}
			},
			checkCode(tel, code) {
				return this.$g_api.commonVerifyCode({
					checkNum: code,
					tel
				})
			},
			async onNextTap() {
				try {
					await this.checkCode(this.fPhone, this.fCode)
					this.$refs.uCode.reset();
					this.getCodeFlag = false
					this.step = 2
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						title: e,
						icon: 'none'
					})
				}
			},
			async onConfirmTap() {
				try {
					await this.checkCode(this.sPhone, this.sCode)
					await this.$g_api.subscriberTel({
						checkNum: this.sCode,
						tel: this.sPhone,
					})
					uni.showToast({
						title: '成功更换手机号',
						icon: 'none'
					})
					setTimeout(() =>{
						this.$g_util.logout()
					}, 1000)
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						title: e,
						icon: 'none'
					})
				}
			},
			codeChange(text) {
				this.tips = text;
			},
		}
	}
</script>

<style scoped lang="scss">
	.tips {
		line-height: 90rpx;
		padding: 0 30rpx;

		text {
			font-size: 26rpx;

			&:nth-child(2) {
				color: $g-main-color;
			}
		}
	}

	.item {
		padding: 0 30rpx;
		font-size: 30rpx;
		border-bottom: 1px solid $g-border-color;
	}

	.item-label {
		width: 126rpx;
	}

	.item-R {
		width: 160rpx;
		text-align: right;
	}
	
	.codeTap {
		color: #999;
		&.active {
			color: $g-main-color;
		}
	}

	.btn {
		margin-top: 150rpx;
	}
</style>
